<script setup lang="ts">

</script>

<template>
    <div class="banner">
        <van-swipe indicator-color="#16C2A3" :autoplay="2000" :duration="1000" loop>
            <van-swipe-item>
                <img src="@/assets/images/banner1.png" alt="" />
            </van-swipe-item>
            <van-swipe-item>
                <img src="@/assets/images/banner2.png" alt="" />
            </van-swipe-item>
            <van-swipe-item>
                <img src="@/assets/images/banner3.png" alt="" />
            </van-swipe-item>
            <van-swipe-item>
                <img src="@/assets/images/banner4.png" alt="" />
            </van-swipe-item>
            <van-swipe-item>
                <img src="@/assets/images/banner5.png" alt="" />
            </van-swipe-item>
            <van-swipe-item>
                <img src="@/assets/images/banner6.png" alt="" />
            </van-swipe-item>
            <van-swipe-item>
                <img src="@/assets/images/banner7.png" alt="" />
            </van-swipe-item>
            <van-swipe-item>
                <img src="@/assets/images/banner8.png" alt="" />
            </van-swipe-item>
            <van-swipe-item>
                <img src="@/assets/images/banner9.png" alt="" />
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<style scoped lang="scss">
.banner {
    padding: 10px 15px;
    height: 130px;

    img {
        width: 100%;
        height: 120px;
        border-radius: 30px;
    }
}
</style>
